شرح دورة أساسيات JavaScript

الدرس الأول: مقدمة في JavaScript

JavaScript هي لغة برمجة تُضيف التفاعلية لصفحات الويب وتُستخدم على نطاق واسع في تطوير التطبيقات.

شرح مفصل:

ما هي JavaScript؟ لغة برمجة عالية المستوى، ديناميكية، تُفسر (interpreted) وليست تُجمّع (compiled)، تُستخدم بشكل رئيسي لإضافة التفاعلية في المتصفحات.
لماذا نحتاجها؟ تُتيح التحكم في عناصر الصفحة، معالجة البيانات، والتفاعل مع المستخدم دون إعادة تحميل الصفحة.
كيفية الاستخدام؟ تُدمج في HTML عبر وسم <script> داخل الصفحة أو ملف خارجي (<script src="app.js">).
أمثلة أساسية:
- طباعة رسالة: console.log("مرحبًا!");
- تنبيه: alert("اهلاً بك!");

مثال:


                            console.log("مرحبًا بك في JavaScript!");
                            alert("هذا مثال بسيط");

النتيجة: رسالة في وحدة التحكم وتنبيه في المتصفح.

الدرس الثاني: المتغيرات وأنواع البيانات

المتغيرات تُستخدم لتخزين البيانات، وJavaScript تدعم أنواع بيانات متعددة.

شرح مفصل:

تعريف المتغيرات:
- var: طريقة قديمة (مشاكل في النطاق).
- let: للمتغيرات القابلة للتغيير (block-scoped).
- const: للثوابت (لا تتغير قيمتها).
أنواع البيانات:
- الأعداد (number): مثل 42، 3.14.
- النصوص (string): مثل "مرحبًا".
- القيم المنطقية (boolean): true، false.
- null: قيمة فارغة.
- undefined: غير معرف.
- الكائنات (object): مثل {name: "علي"}.
- المصفوفات (array): مثل [1, 2, 3].

مثال:


                            let name = "علي";
                            const age = 25;
                            let isStudent = true;
                            console.log(name, age, isStudent);

الدرس الثالث: العمليات الحسابية والمنطقية

العمليات تُستخدم لمعالجة البيانات.

شرح مفصل:

العمليات الحسابية:
- + (جمع)، - (طرح)، * (ضرب)، / (قسمة)، % (الباقي).
العمليات المنطقية:
- && (و)، || (أو)، ! (ليس).
- المقارنة: == (تساوي)، === (تساوي صارم)، !=، >، <.

مثال:


                            let x = 10;
                            let y = 5;
                            console.log(x + y); // 15
                            console.log(x > y && y !== 0); // true

الدرس الرابع: الجمل الشرطية

تُستخدم لاتخاذ القرارات بناءً على شروط.

شرح مفصل:

if/else: تنفيذ كود بناءً على شرط.
switch: للحالات المتعددة.
العامل الثلاثي (Ternary): صيغة مختصرة لـ if/else.

مثال:


                            let score = 85;
                            if (score >= 90) {
                                console.log("ممتاز");
                            } else if (score >= 75) {
                                console.log("جيد جدًا");
                            } else {
                                console.log("حاول مرة أخرى");
                            }
                            // Ternary
                            let result = score >= 75 ? "نجاح" : "رسوب";
                            console.log(result);

الدرس الخامس: الحلقات

تُستخدم لتكرار تنفيذ الكود.

شرح مفصل:

for: تكرار محدد العدد.
while: تكرار بناءً على شرط.
do...while: تكرار ينفذ مرة واحدة على الأقل.
for...of: للمصفوفات.
for...in: للكائنات.

مثال:


                            for (let i = 0; i < 5; i++) {
                                console.log(i);
                            }
                            let arr = [1, 2, 3];
                            for (let val of arr) {
                                console.log(val);
                            }

الدرس السادس: الدوال

الدوال تُستخدم لتنظيم الكود وإعادة استخدامه.

شرح مفصل:

التعريف: باستخدام function.
المعاملات: قيم يتم تمريرها للدالة.
الإرجاع: باستخدام return.
الدوال المجهولة: بدون اسم.
دوال السهم (Arrow Functions): صيغة حديثة مختصرة.

مثال:


                            function add(a, b) {
                                return a + b;
                            }
                            console.log(add(3, 4)); // 7
                            const subtract = (x, y) => x - y;
                            console.log(subtract(10, 3)); // 7

الدرس السابع: الكائنات

الكائنات تُستخدم لتخزين البيانات كمجموعات من المفاتيح والقيم.

شرح مفصل:

التعريف: مثل {key: value}.
الوصول: عبر النقطة (obj.key) أو الأقواس (obj["key"]).
الطرق (Methods): دوال داخل الكائن.

مثال:


                            const user = {
                                name: "علي",
                                age: 25,
                                greet: function() {
                                    console.log(`مرحبًا، ${this.name}`);
                                }
                            };
                            user.greet(); // مرحبًا، علي

الدرس الثامن: المصفوفات

المصفوفات تُستخدم لتخزين قوائم من البيانات.

شرح مفصل:

التعريف: مثل [1, 2, 3].
الطرق:
- push: إضافة عنصر.
- pop: حذف آخر عنصر.
- map: تحويل العناصر.
- filter: تصفية العناصر.

مثال:


                            let numbers = [1, 2, 3];
                            numbers.push(4);
                            console.log(numbers); // [1, 2, 3, 4]
                            let doubled = numbers.map(n => n * 2);
                            console.log(doubled); // [2, 4, 6, 8]

الدرس التاسع: التعامل مع DOM

DOM (Document Object Model) يتيح التفاعل مع عناصر HTML.

شرح مفصل:

التحديد:
- document.getElementById
- document.querySelector
- document.getElementsByClassName
التغيير: مثل element.style، element.textContent.

مثال:


                            let para = document.querySelector("p");
                            para.style.color = "red";
                            para.textContent = "تم التغيير!";

الدرس العاشر: الأحداث

الأحداث تُتيح التفاعل مع تصرفات المستخدم.

شرح مفصل:

أمثلة: onclick، onchange، onmouseover.
الاستماع: باستخدام addEventListener.

مثال:


                            document.querySelector("button").addEventListener("click", () => {
                                alert("تم النقر!");
                            });

الدرس الحادي عشر: الوعود (Promises)

الوعود تُستخدم للتعامل مع العمليات غير المتزامنة.

شرح مفصل:

الحالات: Pending، Fulfilled، Rejected.
الاستخدام: then للنجاح، catch للأخطاء.

مثال:


                            let promise = new Promise((resolve, reject) => {
                                setTimeout(() => resolve("تم!"), 1000);
                            });
                            promise.then(result => console.log(result));

الدرس الثاني عشر: Async/Await

صيغة حديثة للتعامل مع الوعود.

شرح مفصل:

async: تجعل الدالة تُرجع وعدًا.
await: تنتظر نتيجة الوعد.

مثال:


                            async function fetchData() {
                                let response = await fetch("https://api.example.com");
                                let data = await response.json();
                                console.log(data);
                            }
                            fetchData();

الدرس الثالث عشر: التعامل مع JSON

JSON هو تنسيق بيانات شائع في JavaScript.

شرح مفصل:

JSON.stringify: تحويل كائن إلى نص.
JSON.parse: تحويل نص إلى كائن.

مثال:


                            let obj = {name: "علي", age: 25};
                            let json = JSON.stringify(obj);
                            console.log(json); // {"name":"علي","age":25}
                            let parsed = JSON.parse(json);
                            console.log(parsed.name); // علي

الدرس الرابع عشر: التعامل مع BOM

BOM (Browser Object Model) يتيح التحكم في المتصفح.

شرح مفصل:

window.location: التحكم في التنقل.
window.history: السجل.
window.alert: التنبيهات.

مثال:


                            window.location.href = "https://example.com";
                            window.history.back();

الدرس الخامس عشر: الترابط (This)

كلمة this تُحدد السياق الحالي.

شرح مفصل:

الترابط الضمني: داخل كائن.
الترابط الصريح: عبر call، apply، bind.
افتراضي: window في المتصفح.

مثال:


                            const user = {
                                name: "علي",
                                greet() {
                                    console.log(this.name);
                                }
                            };
                            user.greet(); // علي
                            let fn = user.greet;
                            fn.bind({name: "سارة"})(); // سارة

الدرس السادس عشر: النطاق والإغلاق

النطاق يُحدد رؤية المتغيرات، والإغلاق يحفظها.

شرح مفصل:

النطاق: Global، Local (Function)، Block.
الإغلاق: دالة تحتفظ بالمتغيرات الخارجية.

مثال:


                            function outer() {
                                let x = 10;
                                return function inner() {
                                    console.log(x);
                                };
                            }
                            let fn = outer();
                            fn(); // 10

الدرس السابع عشر: البرمجة الكائنية

تنظيم الكود باستخدام الكائنات والفئات.

شرح مفصل:

الفئات (Classes): تعريف مخطط للكائنات.
الوراثة: باستخدام extends.

مثال:


                            class Person {
                                constructor(name) {
                                    this.name = name;
                                }
                                greet() {
                                    console.log(`مرحبًا، ${this.name}`);
                                }
                            }
                            class Student extends Person {
                                constructor(name, grade) {
                                    super(name);
                                    this.grade = grade;
                                }
                            }
                            let s = new Student("علي", "A");
                            s.greet(); // مرحبًا، علي

الدرس الثامن عشر: التعامل مع الأخطاء

إدارة الأخطاء باستخدام try/catch.

شرح مفصل:

try: اختبار الكود.
catch: معالجة الخطأ.
throw: إنشاء خطأ مخصص.

مثال:


                            try {
                                let x = undefinedVar;
                            } catch (error) {
                                console.log("خطأ: " + error.message);
                            }

الدرس التاسع عشر: الدوال المتقدمة

مفاهيم متقدمة في الدوال.

شرح مفصل:

Rest Parameters: ...args لعدد غير محدد من المعاملات.
Default Parameters: قيم افتراضية.
IIFE: دوال تُنفذ فورًا.

مثال:


                            function sum(...numbers) {
                                return numbers.reduce((a, b) => a + b);
                            }
                            console.log(sum(1, 2, 3)); // 6
                            (function() { console.log("IIFE!"); })();

الدرس العشرون: البرمجة الوظيفية

استخدام الدوال كوحدات بناء.

شرح مفصل:

Pure Functions: دوال خالية من الآثار الجانبية.
Higher-Order Functions: دوال تأخذ دوالًا كمعاملات.

مثال:


                            const add = (a, b) => a + b; // Pure
                            const multiplyBy = (n) => (x) => x * n;
                            let double = multiplyBy(2);
                            console.log(double(5)); // 10

الدرس الحادي والعشرون: التخزين المحلي

تخزين البيانات في المتصفح.

شرح مفصل:

localStorage: دائم.
sessionStorage: مؤقت.

مثال:


                            localStorage.setItem("name", "علي");
                            console.log(localStorage.getItem("name")); // علي

الدرس الثاني والعشرون: Fetch API

جلب البيانات من الخوادم.

شرح مفصل:

fetch: طلبات HTTP.
التعامل مع الاستجابة: JSON، نصوص.

مثال:


                            fetch("https://api.example.com/data")
                                .then(response => response.json())
                                .then(data => console.log(data))
                                .catch(error => console.error(error));

الدرس الثالث والعشرون: Web APIs

واجهات برمجية إضافية في المتصفح.

شرح مفصل:

Geolocation: تحديد الموقع.
Canvas: رسم الرسومات.
Web Storage: التخزين.

مثال:


                            navigator.geolocation.getCurrentPosition(position => {
                                console.log(position.coords.latitude, position.coords.longitude);
                            });